<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Javascript DropDown Menu Example</title>

    <style type="text/css">
      .menuDropdown {
        text-decoration:none;
        color: #00C;
        font-size:small;
        cursor:pointer;
      }

      .menuDiv {
        border-top-color: #C9D7F1;
        border-right-color: #36C;
        border-bottom-color: #36C;
        border-left-color: #A2BAE7;
        border-style: solid;
        border-width: 1px;
        z-index: 21;
        padding: 0;
        background-color: white;
        overflow: hidden;
        font-size: small;
        font-family: Arial;
      }

      .menuItem {
        color: #00C;
        padding: 3px;
        text-decoration: none;
        background: white;
      }

      a.menuItem:hover {
        background: #00C;
        color: white;
      }
    </style>

    <script type="text/javascript">
      // Dynamically retrieve Html element (X,Y) position with JavaScript
      // http://stackoverflow.com/questions/442404/dynamically-retrieve-html-element-x-y-position-with-javascript
      function getOffset( el ) {
        var _x = 0;
        var _y = 0;
        while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
          _x += el.offsetLeft - el.scrollLeft;
          _y += el.offsetTop - el.scrollTop;
          el = el.offsetParent;
        }
        return { top: _y, left: _x };
      }

      // hide popup div when clicking outside the div
      // http://www.webdeveloper.com/forum/showthread.php?t=98973
      document.onclick = check;
      // Event accessing
      // http://www.quirksmode.org/js/events_access.html
      // Event properties
      // http://www.quirksmode.org/js/events_properties.html
      function check(e){
        var target = (e && e.target) || (event && event.srcElement); 
        var dropdownMenuDiv = document.getElementById("menuDiv-dropdown"); 
        var dropdownMenu = document.getElementById("menu-dropdown"); 

        if (!checkParent(target, "menuDiv-dropdown")) {
          // click NOT on the menu
          if (checkParent(target, "menu-dropdown")) {
            // click on the link
            if (dropdownMenuDiv.style.display == "none") {
              dropdownMenuDiv.style.left = getOffset(dropdownMenu).left;
              dropdownMenuDiv.style.display = "";
            } else {dropdownMenuDiv.style.display = "none";}
          } else {
            // click both outside link and outside menu, hide menu
            dropdownMenuDiv.style.display = "none";
          }
        }
      }
      function checkParent(t,id) {
        while(t.parentNode) { 
          if( t == document.getElementById(id) ) {return true;} 
          t = t.parentNode;
        } 
        return false;
      }
    </script>

  </head>
  <body>
    <center>
    <a id="menu-dropdown" class="menuDropdown" href="/" onclick="return false;">
      <span style="text-decoration:underline">Menu</span><span style="font-size:.75em;">&#9660;</span>
    </a>
    <center>

    <div class="menuDiv instance0" id="menuDiv-dropdown" style="position: absolute; display: none; width: 70px;">
    <div style="margin-top: 4px;">
      <a class="menuItem" style="display: block; " href="/item1">Item1</a>
      <a class="menuItem" style="display: block; " href="/item2">Item2</a>
      <a class="menuItem" style="display: block; " href="/item3">Item3</a>
    </div></div>

  </body>
</html>
